<style scoped>
/* 内容区域 */
.main {
    width: 95%;
    margin: auto;
    background-color: #f7f7f7;
}

/* 内容区域的头部样式 */
.main .header {
    width: 100%;
    /* background-color: #ed8585; */
    height: 152px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    background-color: #ffff;
    box-sizing: border-box;
}

/* 头部图片的样式 */
.main .header img {
    width: 56px;
    height: 56px;
    margin-right: 20px;
}

/* 头部左侧头像部分 */
.heade_left {
    display: flex;
    margin-bottom: 20px;
}

.heade_left p span {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.427450980392157);
}

/* 头部右侧统计 */
.header_right ul {
    display: flex;
    margin-right: 20px;
}

.header_right ul li {
    width: 124px;
    text-align: center;
    border-right: 1px solid #ababab;
}

.header_right ul li:nth-child(3) {
    border: none;
}

.header_right ul li span {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.427450980392157);
}

.header_right ul li h4 {
    text-align: center;
}

/* 设置单位信息部分样式 */
.main_cart {
    display: flex;
    height: 159px;
    margin: 20px 0;
    background-color: #f7f7f7;
    width: 100%;
}

/* 设置小卡片属性 */
.main_cart .cart {
    width: 430px;
    padding: 0 10px;
    box-sizing: border-box;
    background-color: #fff;
    box-sizing: border-box;
    margin-right: 20px;
}

.main_cart .cart>p {
    line-height: 40px;
}

.heade_left2 {
    display: flex;
    align-items: center;
    border-top: 1px solid #b7b7b7;
    height: 110px;
}

.heade_left2 .p p {
    font-size: 12px;
    line-height: 20px;
    margin-left: 20px;
}

.heade_left2 ul {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    text-align: center;
    font-size: 12px;
}

.heade_left2 ul li img {
    width: 27px;
    height: 27px;
}

/* 发布消息统计 */
.main_table {
    width: 100%;
    background-color: #f7f7f7;
    height: 300px;
    display: flex;
    margin-right: 10px 0;
}

.main_table .table {
    width: 770px;
    background-color: #fff;
}

.main_table .table p,
.main_table .table_tb p,
.main_table .table_card p {
    font-size: 12px;
    line-height: 40px;
    border-bottom: 1px solid #cfcece;
}

.table_tb {
    width: 280px;
    background-color: #fff;
    margin-left: 20px;
}

.table_card {
    width: 295px;
    background-color: #fff;
    margin-left: 20px;
    position: relative;
    font-size: 12px;
}

.table_card img {
    vertical-align: middle;
    text-align: right;
}

.card_1 {
    background-color: rgba(241, 247, 254, 1);
    width: 280px;
    margin: auto;
    height: 60px;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px;
}

.card_1 .stu {
    border: none;
    color: #599FFF;
    height: 60px;
    line-height: 60px;
    vertical-align: middle;

}

.card_1 .stu1 {
    border: none;
    color: #FE8F5D;
    height: 60px;
    line-height: 60px;
}

.card_1 .stu2 {
    border: none;
    color: #5FB741;
    height: 60px;
    line-height: 60px;
}
</style>
<template>
    <div class="main">
        <div class="header">
            <div class="heade_left">
                <img src="https://cdn7.axureshop.com/demo/2117333/images/%E9%A6%96%E9%A1%B5/u584.png" alt="">
                <div>
                    <p> <span>{{ id == "teacher" ? useinfo.useinfo.teacher.name
                        : useinfo.useinfo.student.name }}</span>，祝你开心每一天</p>
                    <p><span>智慧校园&nbsp;</span>|<span>&nbsp;超级管理员</span></p>
                </div>
            </div>
            <div class="header_right">
                <ul style="list-style: none;">
                    <li>
                        <span>待审核相册</span>
                        <h4>3</h4>
                    </li>
                    <li>
                        <span>活跃度排名</span>
                        <p>
                            <span style="font-weight: 600;font-size: 18px;color: #000;">18</span>/<span>24</span>
                        </p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="main_cart">
            <div class="cart">
                <p>单位信息</p>
                <div class="heade_left2">
                    <img src="https://cdn7.axureshop.com/demo/2117333/images/%E9%A6%96%E9%A1%B5/u584.png" alt="">
                    <div class="p">
                        <p>智慧校园</p>
                        <p style="color: rgba(0, 0, 0, 0.427450980392157);">所属区域：{{
                            id == "teacher" ? useinfo.useinfo.teacher.school.areaDetail : "西安市" }}</p>
                    </div>
                </div>
            </div>

            <div class="cart">
                <p>今日简报</p>
                <div class="heade_left2">
                    <ul>
                        <li>
                            <p style="color: #5FB741; font-size: 16px;">10</p>

                            <span>出勤人数</span>
                        </li>
                        <li>
                            <p style="color: #FE8F5D; font-size: 16px;">17</p>
                            <span>审核人数</span>
                        </li>
                        <li>
                            <p style="color: #E13131; font-size: 16px;">9</p>
                            <span>病假人数</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="cart" style="width: 680px; margin-right: none; margin: auto;">
                <p>快捷应用</p>
                <div class="heade_left2">
                    <img src="@/img/bg2.png" alt="" style="width: 660px;">
                </div>
            </div>
        </div>
        <div class="main_table">
            <div class="table">
                <p>发布消息统计 <span style="float: right; font-size: 12px;">查看详情</span></p>
                <!-- 统计柱状表 -->
                <div style="width: 100%; height: 260px;" id="main">
                </div>
            </div>
            <div class="table_tb">
                <p>用户活跃排行 <span style="float: right; font-size: 12px;">查看详情</span></p>
                <!-- 统计表 -->
                <el-table :data="tableData" style="width: 100% " size="small">
                    <el-table-column prop="sort" label="排名" width="80px"></el-table-column>
                    <el-table-column prop="teacher" label="姓名" width="80px"></el-table-column>
                    <el-table-column prop="count" label="累计发布消息数量"></el-table-column>


                    <template>
                        <el-table-column prop="id" label="排名" width="80px"></el-table-column>
                        <el-table-column prop="name" label="姓名" width="80px"></el-table-column>
                        <el-table-column prop="num" label="累计发布消息数量"></el-table-column>
                    </template>
                </el-table>
            </div>
            <div class="table_card">
                <p>用户活跃排行 <span style="float: right; font-size: 12px;">查看详情</span></p>
                <!-- 用户统计表 -->
                <div class="card_1">
                    <div class="stu">学生数量(人)：<span style="font-weight: 600;">{{ stu_total }}</span><img
                            src="@/img/cart1.jpg" alt="">
                    </div>
                </div>
                <div class="card_1" style="background-color:  rgba(253, 245, 242, 1);">
                    <div class="stu1">家长数量(人)：<span style="font-weight: 600;">{{ stu_total }} <img src="@/img/cart2.jpg"
                                alt=""></span></div>
                </div>
                <div class="card_1" style="background-color: rgba(241, 247, 234, 1);">
                    <div class="stu2">老师数量(人)：<span style="font-weight: 600;">{{ tech_total }} <img src="@/img/cart3.jpg"
                                alt=""></span></div>
                </div>
            </div>

        </div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';
import server from '@/api/index';
import { useUseinfoStore } from '@/stores/useinfo'
import { useUseidStore } from "@/stores/useid"
var useid: any = useUseidStore()
var id: any = ref()
id.value = useid.useid[0]
var useinfo = useUseinfoStore()
var stu_total: any = ref('')
var tech_total: any = ref('')
var tableData: any = ref([])
onMounted(async () => {
    var myChart = echarts.init(document.getElementById('main') as HTMLDivElement);
    // 获取消息统计 mxh
    var res = await server.home.index_activeUserRanking()
    tableData.value = res.data.data
    // console.log(tableData);
    // 获取学生人数mxh
    var rew = await server.students.getLeaveApplicationByPage()
    // console.log(rew.data.data.page.total);
    stu_total.value = rew.data.data.page.total
    // 获取老师人数mxh
    var ret = await server.home.teacher_getTeacherByPage()
    // console.log(ret);
    tech_total.value = ret.data.data.page.total

    // 获取活跃度mxh
    var res = await server.home.index_releaseMessageNum()
    var datalist: any = res.data.data
    // console.log(res.data.data);

    var option: any = {

        tooltip: {},
        xAxis: {
            data: Object.keys(datalist)
        },
        yAxis: {},
        series: [
            {
                type: 'bar',
                data: Object.values(datalist),
                barWidth: '20',
            }
        ]
    };
    myChart.setOption(option);

})

</script>